<template>
<h1>员工列表综合练习</h1>
<el-form label-width="80" style="width: 500px;margin: 0 auto">
  <el-form-item label="姓名">
      <el-input placeholder="请输入用户名" v-model="person.name"></el-input>
  </el-form-item>
  <el-form-item label="工资">
    <el-input placeholder="请输入密码" show-password v-model="person.salary"></el-input>
  </el-form-item>
  <el-form-item label="岗位">
    <el-input placeholder="请输入岗位" v-model="person.job"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="success" @click="add()">点我提交</el-button>
  </el-form-item>
</el-form>
  <hr>
  <el-table :data="tableData" style="width: 500px;margin: 0 auto">
    <el-table-column type="index" label="编号" width="80px"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="salary" label="工资"></el-table-column>
    <el-table-column prop="job" label="岗位"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <hr>
  <el-table :data="tableData" style="width: 500px;margin: 0 auto">
<!--    <el-table-column type="index" label="编号" width="80px"></el-table-column>-->
<!--    <el-table-column prop="name" label="姓名"></el-table-column>-->
<!--    <el-table-column prop="salary" label="工资"></el-table-column>-->
<!--    <el-table-column prop="job" label="岗位"></el-table-column>-->
    <el-table-column v-for="col in tableColumns" v-bind="col"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from 'vue';
const tableData =ref([]);
const person =ref([{name:"",salary:"",job:""}]);
const add =()=>{
  // let newperson={
  //   name:person.value.name,
  //   salary:person.value.salary,
  //   job:person.value.job
  // };
  tableData.value.push({...person.value});
  person.value={name:"",salary:"",job:""};
  console.log(tableData.value);
};
const del=(index,p)=>{
  if(confirm("您确认要删除"+p.name+"吗?")){
    tableData.value.splice(index,1);
  }
}

const tableColumns = ref([
  {type:'index',label:'编号',width:80},
  {label:'姓名',prop:'name'},
  {label:'工资',prop:'salary'},
  {label:'岗位',prop:'job'}
])
</script>


<style scoped>

</style>